<template>
  <div>
    <header class="text-header">
      <router-link :to="{path: 'tLogin' }">
        <img src="./../../assets/pt/jiantou.png" />
      </router-link>
      <h2>交易记录</h2>
    </header>
    <div class="pay-record-container" v-for="monthInfor in payRecordList">
      <section class="month-record">
        <div class="month-record-title">
          <p class="month-title-left">{{monthInfor.month}}</p>
          <p class="month-title-right">{{monthInfor.total}}</p>
        </div>
        <div class="user-record" v-for="userInfor in monthInfor.userList">
          <div class="user-record-blocks">
            <div class="record-block-item">
              <p>{{userInfor.weekday}}</p>
              <p>{{userInfor.date}}</p>
            </div>
            <div class="record-block-item">
              <img :src="'/static/bpt/' + userInfor.imgUrl + '.png'" />
            </div>
            <div class="record-block-item">
              <p>{{userInfor.name}}</p>
              <p>支付成功</p>
            </div>
          </div>
          <div class="user-record-blocks">
            <p class="user-money">{{userInfor.money}}</p> 
          </div>
        </div>
      </section>
    </div>
  </div>	
</template>

<script>
export default {
  data(){
    return{
      payRecordList: [
        { month: '2016年11月', total: '+3600', userList: [
          { weekday: '今天', date: '10:30', imgUrl: 'u2', name: '韩英', money: '+600'},
          { weekday: '周二', date: '11-29', imgUrl: 'u4', name: '李智涵', money: '+550'}
				]},
				{ month: '2016年10月', total: '+4632', userList: [
          { weekday: '周五', date: '10-28', imgUrl: 'u1', name: '田菲', money: '+495'},
          { weekday: '周二', date: '10-25', imgUrl: 'u5', name: '张雪', money: '+610'},
          { weekday: '周一', date: '10-10', imgUrl: 'u3', name: '欧梅', money: '+495'},
          { weekday: '周二', date: '10-18', imgUrl: 'u6', name: '刘亚楠', money: '+610'}
        ]}
      ]
    }
  }
}	
</script>

<style>
.text-header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0.28rem;
  background-color: #e87979;
}
.text-header a img {
  position: absolute;
  left: 0.3rem;
	top: 50%;
	transform: translateY(-50%);
  height: 0.32rem;
  width: 0.32rem;
}
.text-header h2 {
  font-size: 0.34rem;
  color: #fff;
  text-align: center;
}
.pay-record-container {
  padding: 0 0.2rem;
  font-size: 0.25rem;
}
.month-record-title {
  display: flex;
  padding: 0.15rem;
}
.month-title-left {
  flex: 1;
}
.month-title-right {
  flex: 1;
  text-align: right;
}
.user-record {
  display: flex;
  align-items: center;
  padding: 0.1rem 0.15rem 0.1rem 0.05rem;
  margin-bottom: 0.20rem;
  background-color: #fff;
}
.user-record-blocks:first-child {
  flex: 1 1 55%;
}
.user-record-blocks:last-child {
  flex: 1 1 45%;
}
.user-record-blocks {
  display: flex;
  align-items: center;
  border-radius: 0.06rem;
}
.record-block-item:first-child {
  flex: 1 1 22%;
}
.record-block-item:nth-child(2) {
  flex: 1 1 45%;
}
.record-block-item:nth-child(3) {
  flex: 1 1 33%;
}
.record-block-item {
  text-align: center;
}
.record-block-item p {
  line-height: 0.42rem;
}
.record-block-item img {
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
}
.user-money {
  width: 100%;
  text-align: right;
}
</style>